<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .unit{
            width: 350px;
            margin: auto;
            border-bottom: solid 1px #e9e9e9;
        }
        .content{
            float: left;
            margin-right: 35px;
        }
        .info{
            color: #6c6669;
            margin-top: -10px;
            margin-bottom: 10px;
        }
        .original{
            border: solid 1px #8e8e8e;
            border-radius: 10px;
            padding: 1px 5px;
            font-size: 12px;
        }
    </style>
</head>
<body>

<div id="app">
    <son @connect="say" :hub-abc="name" :detail="msg"></son>
</div>
<script>
    Vue.component('son',{
        props:['detail','hubAbc'],
        template:`<button @click="send">点我---{{hubAbc}}----{{detail}}</button>`,
        data(){
          return {
              msg: '我是子组件里面的数据',
              name: 'dap'
          }
        },
        methods:{
            send(){
                this.$emit('connect',this.msg,this.name)
            }
        }

    })
    let vm = new Vue({
        el:'#app',
        data () {
            return {
                msg: '我是父组件里面的数据',
                name: 'pactera'
            }
        },
        methods:{
            say(msg,name){
                alert(`大家好，我监听到了事件connect的触发:` + msg+`-----`+name)
            }
        }
    })
</script>

</body>
</html>